<template>
	<div class="vue_app GiftBuySuccess" style="position: relative;width: 100%;height: 100%;background-color: #fff;">
		<my-header :title="'订单成功'" :hasTitle="true" :hasBack="true"></my-header>
		<!--头部-->
		<!--<div class="Successcontant" v-if="orderData">-->
		<div class="Successcontant" :style="`height: ${screenHeight}px`">
			<!--<translate-main ref='verticalScroll'>-->
			<div class="Successgiftimg">
				<img :src="orderData.giftcardImg ||'static/image/big-giftcard.png'" />
			</div>
			<div class="Successdetil">
				<span class="Sucsp1">礼品卡购买成功！</span>
				<!--<p class="Sucp1">注： 激活码已发送至账号对应的手机号，请注意查收。</p>-->
				<div class="Sucp2"><span>实付金额</span><span class="Sflotrigth">￥{{Number(orderData.realPay).toFixed(2)}}</span></div>
				<div class="Sucp"><span>购买数量</span><span class="Sflotrigth">{{orderData.cardNum}}张</span></div>
				<!--<div class="Sucp"><span>购买方式</span><span class="Sflotrigth">{{payTypefunction(orderData.payType)}}</span></div>-->
				<div class="Sucp" v-if="cardData.length>0">
					<span>礼品卡号</span>
					<div class="Sflotrigth giftsucard">
						<p v-for="(val,index) in cardData" :key="index">{{val.giftcardEntityCode}}</p>
					</div>
				</div>
			</div>
			<div class="Successbotton">
				<span @click="clickactivtecard">激活充值到钱包</span>
				<span class="Sflotrigth ongiveother" @click="giveother">转赠给好友</span>
				<span @click="goderdetil">购买记录</span>
				<span @click="gohome" class="Sflotrigth">返回首页</span>
			</div>
			<!--</translate-main>-->
		</div>
		<!--</div>-->
		<passward-panel ref="passwardPanel" @passwordPendingChange="passwordPendingChangeEvent">
		</passward-panel>
		<!-- 优惠券弹窗 -->
		<my-coupons v-if='hasCoupon' :mycouponsdata='mycouponsdata' @goOpenConpons="goOpenConpons"></my-coupons>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import { mapGetters } from "vuex";
	import { Toast } from '@/utils/toast';
	import { MessageBox } from '@/ui-components';
	import myCoupons from '../../real-components/showCoupons';
	import { lipinquan } from '../../config/orderTypeCode';
	import TranslateMain from '../../real-components/VerticalScroll';
	import passwardPanel from "../../real-components/ConfirmOrder/ConfirmOrderPursekey"; //钱包支付密码面板
	export default {
		data() {
			return {
				giftcardCodeid: '',
				//等待密码校验的对象
				pwPendingResult: {
					pwPendingState: true, //默认为true，代表在等待
					result: "initial",
					msg: ""
				},
				//分享的相关信息
				giveotherurl: '',
				giveothertitle: '送你一张礼品卡',
				giveothercontant: '',
				giveotherimg: '',
				//订单号
				orderNo: '',
				//订单相关数据
				orderDateArr: {},
				cardData: {},
				orderData: {},
				//弹窗
				hasCoupon: false,
				mycouponsdata: [],
			}
		},
		components: {
			"my-header": MyHeader,
			"passward-panel": passwardPanel,
			"my-coupons": myCoupons,
			"translate-main": TranslateMain,
		},
		methods: {
			//支付成功后进入当前页面
			getPageDate() {
				/*if(this.$route.query.orderType == lipinquan) {*/
				this.orderNo = this.$route.query.orderNo
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/giftCardIndent/findCardDetail',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
					params: {
						"orderNo": this.$route.query.orderNo,
						"cardCode": this.$route.query.cardCode,
					}
				};
				axios(config).then((res) => {
					this.orderDateArr = res.data.data[0]
					this.cardData = this.orderDateArr.cardData || {}
					this.orderData = this.orderDateArr.orderData || {}
					if(this.orderData.orderStatus == 1) {
						MessageBox('订单已取消', '支付金额已退回原支付账号').then(
							() => {
								this.$router.replace({
									path: 'buyGiftCard',
								})
							}
						)
						return
					}
				})
				/*}*/
			},
			// 优惠券弹窗接口
			getcoupons() {
				let options = {
					method: "get",
					url: api.customer_host + "/giftCardH5/getGiveCoupon",
					headers: {
						sessionId: localStorage.getItem("sessionId")
					},
					params: {
						"orderNo": this.$route.query.orderNo,
					}
				};
				axios(options).then(resdata => {
					localStorage.setItem("successorderNo", this.orderNo);
					if(resdata.data.returnCode != 0 && resdata.data.data.length > 0) {
						this.hasCoupon = true
						this.mycouponsdata = resdata.data.data
					}
				})
			},
			//支付方式
			payTypefunction(type) {
				let a;
				switch(type) {
					case 1:
						a = '支付宝';
						break;
					case 2:
						a = '银联';
						break;
					case 3:
						a = '微信';
						break;
					case 4:
						a = '工行';
						break;
					case 5:
						a = '现金';
						break;
					case 6:
						a = '优惠券';
						break;
					case 7:
						a = '银联';
						break;
					case 8:
						a = '威富通';
						break;
					default:
						a = '';
				}
				return a
			},
			//立即激活按钮
			clickactivtecard() {
				this.$router.replace({
					name: 'ActivateGiftCard',
					params: {
						giftcardEntityCode: this.cardData[0].giftcardEntityCode,
						activationCode: this.cardData[0].activationCode
					}
				})
			},
			//跳转订单详情
			goderdetil() {
				/*this.$router.replace({
					name: 'GiftOrderDetails',
					query: {
						"orderNo": this.orderData.orderNo,
						"cardCode": this.orderData.cardCode,
					}
				})*/
				this.$router.replace({
					path: 'BuyGiftCardRecord'
				})
			},
			//跳转到首页
			gohome() {
				this.$router.replace({
					path: 'home'
				})
			},
			//跳转分享转赠他人
			async giveother() {
				if(!this.passwordIsSet()) {
					this.$router.push({
						name: "SetKeyWallet",
						params: {
							goBack: true
						}
					});
					return;
				}
				/*第一步校验支付密码*/
				//开始调用密码盘输入密码
				this.$refs.passwardPanel.showOrHide();
				console.log("正在等待密码校验");
				await this.waitPasswordInputAndReg();
				console.log("等待密码校验完毕");
				/*第二部分密码解密*/
				this.getpassword();
			},
			//判断是否设置过密码
			passwordIsSet() {
				//1为设置过密码
				return this.userInfo.walletStatus === "1";
			},
			//等待密码校验的promise
			waitPasswordInputAndReg() {
				return new Promise((resolve, reject) => {
					this.timer = setInterval(() => {
						if(!this.pwPendingResult.pwPendingState) {
							if(this.pwPendingResult.result) {
								clearInterval(this.timer);
								this.timer = null;
								//重新置为初始状态，等待用户下一次输入
								resolve(this.pwPendingResult);
							} else {
								//密码校验失败
								this.mToastFn(this.pwPendingResult.msg);
							}
							this.pwPendingResult.pwPendingState = true;
						}
					}, 100);
				});
			},
			mToastFn(msg, duration = 1000, type = "fail") {
				Toast({
					message: msg,
					type,
					duration
				});
			},
			//当输入密码组件校验完毕后改变pending值
			passwordPendingChangeEvent(obj) {
				//接收到一个对象
				this.pwPendingResult = obj;
			},
			//分享转赠方法
			SharePlugin(sucFunc, failFunc, url, opts, className) {
				sucFunc = sucFunc || function() {};
				failFunc = failFunc || function() {};
				//url = url || 'Share';
				opts = opts || {
					"title": this.giveothertitle,
					"content": this.giveothercontant,
					"url": this.giveotherurl,
					"imageurl": this.giveotherimg
				};
				className = className || null;
				cordova.exec(sucFunc, failFunc, "SharePlugin", "start", [className, url, opts]);
			},
			// 关闭优惠券弹窗
			goOpenConpons() {
				this.hasCoupon = false;
			},
			//激活码解密
			getpassword() {
				var sessionId = localStorage.getItem('sessionId');
				let config = {
					url: window.api.customer_host + '/giftCardSalesAPI/decryptedActivationCode',
					method: 'GET',
					headers: {
						'sessionId': sessionId,
					},
					params: {
						activationCode: this.cardData[0].activationCode,
						giftcardEntityCode: this.cardData[0].giftcardEntityCode
					}
				};
				axios(config).then((res) => {
					if(res.data.returnCode == 1) {
						var passcode = res.data.data[0].activationCode
						//this.giveotherurl = `${location.origin + location.pathname + '#/main/ActivateGiftCard?giftcardEntityCode=' + this.cardData[0].giftcardEntityCode}`;
						this.giveotherurl = `${location.origin + location.pathname + '#/main/giftCardGuidance'}`;
						this.giveothercontant = '卡号：' + this.cardData[0].giftcardEntityCode + ' 激活码：' + passcode;
						this.giveotherimg = this.orderData.giftcardImg;
						/*第三部分享到微信*/
						this.SharePlugin(
							function(message) {
								if(message == '转增成功') {
									//分享成功后送礼                    
									console.log("转增成功");
								} else {
									//alert(message);
									return false;
								}
							},
							function(err) {
								console.log("Error: " + err);
							}
						);
					} else {
						this.mToastFn(res.data.msg);
					}
				})
			}
		},
		computed: {
			...mapGetters("wxh", [
				"userInfo"
			]),
			screenHeight() {
				return window.innerHeight - '60';
			},
		},
		watch: {

		},
		mounted() {
			if(localStorage.getItem('sessionId') && localStorage.getItem("successorderNo") != this.$route.query.orderNo) {
				this.getcoupons()
			}
			this.getPageDate()
		},
	}
</script>

<style>
	.GiftBuySuccess .Successcontant {
		width: 100%;
		/*height: 100%;*/
		background-color: #fff;
		padding: 1.5rem 1rem 0rem 1rem;
		overflow: hidden;
	}
	
	.GiftBuySuccess .Sflotrigth {
		float: right;
	}
	
	.GiftBuySuccess .Successcontant .Successgiftimg {
		position: relative;
		max-height: 9.5rem;
	}
	
	.GiftBuySuccess .Successcontant .Successgiftimg img {
		width: 100%;
		max-height: 9.5rem;
	}
	
	.GiftBuySuccess .Successcontant .Successdetil {
		padding: 0.75rem 0.5rem;
		text-align: left;
	}
	
	.GiftBuySuccess .Successcontant .Successdetil .Sucsp1 {
		font-size: 0.8rem;
		font-weight: bold;
		color: #3AB537;
	}
	
	.GiftBuySuccess .Successcontant .Successdetil .Sucp1 {
		font-size: 0.65rem;
		color: #666;
		margin-bottom: 0.5rem;
	}
	
	.GiftBuySuccess .Successcontant .Successdetil .Sucp2 {
		padding-bottom: 0.5rem;
		border-bottom: 1px solid #ccc;
	}
	
	.GiftBuySuccess .Successcontant .Successdetil .Sucp {
		margin-top: 0.5rem;
	}
	
	.GiftBuySuccess .Successcontant .giftsucard {
		display: inline-block;
	}
	
	.GiftBuySuccess .Successcontant .Successbotton {
		clear: both;
		padding: 1rem 0.5rem;
		text-align: left;
	}
	
	.GiftBuySuccess .Successcontant .Successbotton span {
		display: inline-block;
		width: 45%;
		height: 1.6rem;
		line-height: 1.6rem;
		text-align: center;
		border: 1px solid #ccc;
		border-radius: 0.2rem;
		margin-bottom: 0.75rem;
	}
	
	.GiftBuySuccess .Successcontant .Successbotton .ongiveother {
		color: #fff;
		background-color: #EF5423;
	}
</style>